<template>
  <div>
    <leftRightSplit :left-span="4">
      <el-card slot="left">
        <div slot="header">
          <span>填报单管理</span>
        </div>
        <dicItemTree
          ref="fillTypeTree"
          :dic-id="DictItemDic.fillInType"
          @change="chioseFillType"
          @load="loadFillType"
        />
      </el-card>
      <el-card slot="right">
        <div slot="header">
          <span>{{ title }}</span>
        </div>
        <el-row>
          <el-form :inline="true" :model="queryParam">
            <el-form-item label="标题">
              <el-input
                v-model="queryParam.QueryKey"
                placeholder="标题"
                @change="load"
              />
            </el-form-item>
            <el-form-item label="填报单状态">
              <enumItem
                v-model="queryParam.Status"
                :dic-key="EnumDic.FillInStatus"
                placeholder="填报单状态"
                sys-head="oa"
                :multiple="true"
                @change="load"
              />
            </el-form-item>
            <el-form-item>
              <el-button
                type="success"
                @click="add"
              >新增填报单</el-button>
              <el-button @click="reset">重置</el-button>
            </el-form-item>
          </el-form>
        </el-row>
        <w-table
          :data="fillList"
          :columns="columns"
          :is-paging="true"
          row-key="Id"
          :paging="paging"
          @load="load"
        >
          <template slot="progress" slot-scope="e">
            <span style="color: #43AF2B;font-size: 16px;">{{ e.row.AlreadyFill }}</span> / <span style="color: #1890ff;">{{ e.row.FillTotal }}</span>
          </template>
          <template slot="fillType" slot-scope="e">
            {{ fillType[e.row.FillType] }}
          </template>
          <template slot="fillInTime" slot-scope="e">
            {{ moment(e.row.BeginDate).format('YYYY-MM-DD') + ' 至 ' + moment(e.row.EndDate).format('YYYY-MM-DD') }}
          </template>
          <template slot="auditEndTime" slot-scope="e">
            {{ moment(e.row.AuditEndTime).format('YYYY-MM-DD HH:mm') }}
          </template>
          <template slot="status" slot-scope="e">
            {{ FillInStatus[e.row.Status].text }}
          </template>
          <template slot="action" slot-scope="e">
            <el-button
              v-if="e.row.Status == 0 || e.row.Status == 3"
              size="mini"
              type="primary"
              title="提交审核"
              icon="el-icon-coordinate"
              circle
              @click="openAudit(e.row)"
            />
            <el-button
              v-if="e.row.Status == 0 || e.row.Status == 3"
              size="mini"
              type="primary"
              title="编辑"
              icon="el-icon-edit"
              circle
              @click="edit(e.row)"
            />
            <el-button
              v-if="e.row.Status == 0"
              size="mini"
              type="danger"
              title="删除"
              icon="el-icon-delete"
              circle
              @click="drop(e.row)"
            />
          </template>
        </w-table>
      </el-card>
    </leftRightSplit>
    <flowInitiate :audit-param="auditParam" :is-submit.sync="isSubmit" @success="submitAudit" />
  </div>
</template>

<script>
import moment from 'moment'
import * as fillInApi from '@/OA/api/fillIn'
import flowInitiate from '@/flow/components/audit/flowInitiate.vue'
import {
  DictItemDic,
  EnumDic,
  FillInStatus
} from '@/OA/config/oaConfig'
import dicItemTree from '@/components/base/dicItemTree.vue'
export default {
  components: {
    dicItemTree,
    flowInitiate
  },
  data() {
    return {
      DictItemDic,
      EnumDic,
      FillInStatus,
      fillList: [],
      rolePower: [
        'oa.fillIn.add',
        'oa.fillIn.set',
        'oa.fillIn.delete'
      ],
      title: '所有填报单',
      isSubmit: false,
      fillType: {},
      auditParam: {
        AppId: '207777498490693',
        LinkPk: null,
        LinkType: 'DataFillin',
        DocTitle: null
      },
      columns: [
        {
          key: 'Title',
          title: '标题',
          align: 'left',
          minWidth: 250
        },
        {
          key: 'FillType',
          title: '填报类型',
          align: 'center',
          slotName: 'fillType',
          width: 100
        },
        {
          key: 'FillInTime',
          title: '填报时段',
          align: 'center',
          slotName: 'fillInTime',
          minWidth: 200
        },
        {
          key: 'Status',
          title: '状态',
          align: 'center',
          slotName: 'status',
          minWidth: 120
        },
        {
          key: 'progress',
          title: '进度',
          align: 'center',
          width: 125,
          slotName: 'progress'
        },
        {
          key: 'AuditEndTime',
          title: '审核时间',
          align: 'center',
          slotName: 'auditEndTime',
          sortable: 'custom',
          minWidth: 100
        },
        {
          key: 'Action',
          title: '操作',
          align: 'left',
          width: '180px',
          slotName: 'action'
        }
      ],
      paging: {
        Size: 20,
        Index: 1,
        SortName: 'Id',
        IsDesc: false,
        Total: 0
      },
      visible: false,
      id: null,
      queryParam: {
        CompanyId: null,
        QueryKey: null,
        FillType: null,
        Status: null
      }
    }
  },
  computed: {
    comId() {
      return this.$store.getters.curComId
    }
  },
  mounted() {
    this.initPower()
    this.title = '所有填报单'
  },
  methods: {
    moment,
    submitAudit() {
      const row = this.fillList.find(c=>c.Id == this.auditParam.LinkPk)
      row.Status = FillInStatus[1].value
    },
    openAudit(row) {
      this.auditParam.LinkPk = row.Id
      this.auditParam.DocTitle = row.Title
      this.isSubmit = true
    },
    loadFillType(e) {
      this.fillType = e.text
      this.reset()
    },
    async initPower() {
      this.rolePower = await this.$checkPower(this.rolePower)
    },
    checkPower(power) {
      return this.rolePower.includes(power)
    },
    edit(row) {
      this.$router.push({ name: 'fillEdit', params: { id: row.Id }})
    },
    add() {
      this.$router.push({ name: 'fillAdd', query: { type: this.queryParam.FillType }})
    },
    async load() {
      const res = await fillInApi.Query(this.queryParam, this.paging)
      if (res.List) {
        this.fillList = res.List
      } else {
        this.fillList = []
      }
      this.paging.Total = res.Count
    },
    drop(row) {
      const title = '确认删除填报单 ' + row.Title + '?'
      const that = this
      this.$confirm(title, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        that.submitDrop(row.Id)
      })
    },
    async submitDrop(id) {
      await fillInApi.Delete(id)
      this.$message({
        type: 'success',
        message: '删除成功!'
      })
      this.load()
    },
    reset() {
      this.queryParam.CompanyId = this.comId
      this.queryParam.QueryKey = null
      this.queryParam.Status = null
      this.paging.Index = 1
      this.load()
    },
    chioseFillType(e) {
      if (e.value.length === 0) {
        this.queryParam.FillType = null
        this.title = '所有填报单'
      } else {
        const item = e.value[0]
        this.queryParam.FillType = item.value
        this.title = item.text + '-填报单列表'
      }
      this.load()
    }
  }
}
</script>
